@use "@react-md/core/a11y";
@use "@react-md/core/colors";
@use "@react-md/core" with (
  // like the typography styles, this would be merged with the
  // `$mark-recommended-styles` if you want to just add some changes
  $mark-custom-styles: (
      background: colors.$blue-700,
      color: a11y.contrast-color(colors.$blue-700)
    ),
  // or manually set all mark styles using this variable. this would reset
  // it back to the browser default
   // $mark-styles: (background: Mark, color: MarkText, font-weight: 700)
);

// this is only required for this demo. In your application, this should just be the normal:
// @include core.styles;
.container {
  :global {
    @include core.typography-mark-styles($disable-layer: true);
  }
}
